<template>
  <div>
    <div class="details">
      <div v-for="item of ResolvedDatas" @dblclick="onCopyValue(item)" :style="{ 'flex': item.tag == 'attachment' ? '0 0 100%' : '0 0 33.333%' }">
        <label>{{ item.name }}</label>
        <template v-if="item.tag == 'view'"> </template>
        <template v-else-if="item.tag == 'attachment'">
          <ul>
            <li v-for="path of getAttachments(item.value)">
              <a target="_blank" :href="path.path">{{ path.name }}</a>
            </li>
          </ul>
        </template>
        <template v-else-if="item.tag == 'request'">
          <Button type="primary" @click="getDoa" shape="circle" icon="md-code-download" size="small">获取</Button>
        </template>
        <span v-else-if="item.tag == 'status'">{{ item.value | workflowStatus }}</span>
        <span v-else>{{ item.value }}</span>
      </div>
    </div>
    <Modal v-model="showDoa" :width="900" :transfer="true" :fullscreen="true" title="Doa详情">
      <Table border :columns="doaColumns" :data="doaDetails.data" />
      <div slot="footer"></div>
    </Modal>
  </div>
</template>
<script>
import util from '~/libs/util.js';

export default {
  props: {
    data: {
      type: Object,
      defualt: function() {
        return {};
      }
    }
  },
  data() {
    return {
      ResolvedDatas: [],
      doaDetails: {},
      showDoa: false,
      doaColumns: [
        {
          title: 'NodeId',
          key: 'NodeID',
          width: 100
        },
        {
          title: 'DOA项ID',
          key: 'DOAItemID',
          width: 100
        },
        {
          title: 'DOA角色',
          key: 'DOAColumnName',
          width: 120
        },
        {
          title: 'Action',
          key: 'Action',
          width: 90
        },
        {
          title: '审批列表',
          render: (h, { row }) => {
            let doas = row.DOARolesInColumnList;

            return h(
              'ul',
              {},
              doas.map(d => {
                return h('li', {}, [
                  `${d.RoleTypeName}(${d.OperationDesc})`,
                  h(
                    'ul',
                    {},
                    d.SystemUserList.map(c => {
                      return h(
                        'li',
                        c.OperatorUserAccount && c.OperatorUserAccount != c.UserAccount
                          ? `${c.OperatorUserID} - ${c.OperatorUserDisplayNameCN}(${c.OperatorUserDisplayNameEN})`
                          : `${c.UserID} - ${c.UserDisplayNameCN}(${c.UserDisplayNameEN})`
                      );
                    })
                  )
                ]);
              })
            );
          }
        }
      ]
    };
  },
  watch: {
    data() {
      this.resolvedData();
    }
  },
  methods: {
    resolvedData() {
      if (!this.data) {
        return [];
      }

      let rs = [
        { name: 'ID', value: this.data.ID },
        { name: '流水号', value: this.data.SerialNumber },
        { name: '标题', value: this.data.Title },
        { name: '流程编号', value: this.data.ProcessID },
        { name: '流程名称', value: this.data.ProcessName },
        { name: '流程组', value: `${this.data.ProcessGroupName}(${this.data.ProcessGroupID})`, copy: this.data.ProcessGroupID },
        { name: '项目', value: `${this.data.ProjectName}(${this.data.ProjectID})`, copy: this.data.ProjectID },
        { name: '部门', value: `${this.data.DepartmentName}(${this.data.DepartmentID})`, copy: this.data.DepartmentID },
        { name: '申请人', value: `${this.data.ApplicantUserDisplayNameCN}(${this.data.ApplicantUserID})`, copy: this.data.ApplicantUserID },
        { name: '流程开始时间', value: this.data.ProcStartDate },
        { name: '流程实例编号', value: this.data.ProcessInstanceID },
        { name: '最后审批人', value: `${this.data.LastApprovedUserDisplayNameCN}(${this.data.LastApprovedUserID})`, copy: this.data.LastApprovedUserID },
        { name: '最后审批时间', value: this.data.LastApprovedDate },
        { name: '流程状态', value: this.data.ProcessStatus, tag: 'status' },
        { name: 'DOA获取条件', value: this.data.DOAConditions, tag: 'request' },
        { name: '表单Url', value: this.data.BizFormUrl, tag: 'view' },
        { name: '暂缓', value: `${this.data.HoldStartDate || ''}\n${this.data.HoldComments || ''}` },
        { name: '附件地址', value: this.data.AttachmentUrls, tag: 'attachment' }
      ];

      this.ResolvedDatas = rs;
    },
    getDoa() {
      let conditions = encodeURI(this.data.DOAConditions);

      if (conditions.toLowerCase().indexOf('processid') == -1) {
        conditions += `&ProcessID=${this.data.ProcessID}`;
      }

      this.$http.post(`/api/iworkflow/prod/workflow/doa`, { conditions: conditions }).then(res => {
        this.doaDetails = res;
        this.showDoa = true;
      });
    },
    getAttachments(attachement) {
      if (!attachement) {
        return [];
      }

      let rs = [];
      let items = attachement.split('|');

      for (let item of items) {
        let params = util.resolveParams(item);

        rs.push({
          name: params.get('filename') || '附件',
          path: item
        });
      }

      return rs;
    },
    onCopyValue(item) {
      this.$copyText(item.copy || item.value).then(() => {
        this.$Message.success('结果已复制！');
      });
    }
  },
  mounted() {
    this.resolvedData();
  }
};
</script>
<style lang="less">
.details {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  background: #fff;
  padding: 5px 15px;
  border-radius: 0 0 5px 5px;
  margin-bottom: 10px;
  border: 1px solid #d8d8d8;

  > div {
    flex: 0 0 33.33%;
    margin-bottom: 3px;
    cursor: default;
    user-select: none;

    > label {
      &:after {
        content: '：';
      }
    }

    > span {
      word-wrap: none;
      cursor: pointer;
    }
    > ul {
      list-style: none;
      display: inline-block;
      counter-reset: number 0;

      > li {
        position: relative;
        top: 1px;
        list-style: none;
        display: inline-block;
        padding-right: 15px;

        &:before {
          counter-increment: number;
          content: counter(number) + '、';
        }

        &:last-of-type {
          padding-right: 0;
        }
      }
    }
  }
}

.ivu-table-cell {
  > ul {
    list-style: none;

    > li {
      font-size: 16px;
      font-weight: bold;

      > ul {
        list-style: none;
        margin-left: 20px;

        > li {
          font-size: 14px;
          font-weight: normal;
        }
      }
    }
  }
}
</style>
